<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>好粮有网</title>
	<link rel="stylesheet" href="../mui/mui.min.css">
	<link rel="stylesheet" href="../css/intention.css">
	<link rel="stylesheet" href="../element-ui/element-ui.css">
	<script src="../js/flexible.js"></script>
</head>

<body>
	<div id="app">

		<div class="nav_logo" style="text-align: center" v-if="flag =='0'">
			<div>
				<img class="nav_logo_image" src="../img/phone_Logo.png?123123">
			</div>
			<div class="contact">
				<div class="xian"></div>
				<div class="text">请留下您的联系方式</div>
			</div>
			<!-- <el-form class="nav_form" :model="formData" :rules="formRules" ref="formData">
				<el-form-item style="margin-bottom: 0px;" prop="name" class="nav_form_div">
					<label class="nav_form_div_label">姓名</label>
					<input class="nav_form_div_input" type="text" v-model="formData.name" placeholder="请填写您的姓名">
				</el-form-item>
				<el-form-item style="margin-bottom: 0px;" prop="phone">
					<div class="nav_form_div">
						<label class="nav_form_div_label">手机号</label>
						<input class="nav_form_div_input" type="text" v-model="formData.phone" placeholder="请填写您的手机号"
							@blur="edit1">
					</div>
				</el-form-item>
				<el-form-item style="margin-bottom: 0px;" prop="email">
					<div class="nav_form_div">
						<label class="nav_form_div_label">邮箱</label>
						<input class="nav_form_div_input" type="text" v-model="formData.email" placeholder="请填写您的邮箱"
							@blur="edit2">
					</div>
				</el-form-item>
				<el-form-item style="margin-bottom: 0px;" prop="cooperationIntention">
					<div>
						<textarea class="testarea" style="height: 100px;
								width: 90%;
								border: 1px solid rgb(230, 162, 60);
								outline: none;" v-model="formData.cooperationIntention" placeholder="请描述您的合作意向，如粮油批发等（选项）"></textarea>
					</div>
				</el-form-item>
				<el-form-item style="margin-bottom: 0px;">
					<div class="mui-button-row">
						<button type="button"
							style="margin-bottom: 60px;width: 90%;height: 40px;margin-top: 20px;background-color: #E6A23C;border: none;outline: none;border-radius: 20px;"
							class="mui-btn mui-btn-primary" @click="save">提交</button>
					</div>
				</el-form-item>
			</el-form> -->
			<form class="nav_form">
				<div class="nav_form_div">
					<label class="nav_form_div_label">姓名</label>
					<input class="nav_form_div_input" type="text" v-model="name" placeholder="请填写您的姓名">
				</div>
				<div class="nav_form_div">
					<label class="nav_form_div_label">手机号</label>
					<input class="nav_form_div_input" type="text" v-model="phone" placeholder="请填写您的手机号" @blur="edit1">
				</div>
				<div class="nav_form_div">
					<label class="nav_form_div_label">邮箱</label>
					<input class="nav_form_div_input" type="text" v-model="email" placeholder="请填写您的邮箱" @blur="edit2">
				</div>
				<div>
					<textarea class="testarea" style="height: 100px;
					width: 90%;
					border: 1px solid rgb(230, 162, 60);
					outline: none;" v-model="cooperationIntention" placeholder="请描述您的合作意向，如粮油批发等（选项）"></textarea>
				</div>
				<div class="mui-button-row">
					<button type="button"
						style="margin-bottom: 60px;width: 90%;height: 40px;margin-top: 20px;background-color: #E6A23C;border: none;outline: none;border-radius: 20px;"
						class="mui-btn mui-btn-primary" @click="save">提交</button>
				</div>
			</form>
		</div>
		<div style="text-align: center" v-if="flag =='1'">
			<img style="width: 90%;margin-top: 100px " src="../img/phoneLogo_success.png">
			<div style="color: #E6A23C;font-size: 22px;margin-top: 20px">提交成功</div>
			<div style="color: rgb(34, 32, 30);font-size: 15px;margin-top: 20px">感谢您的支持，期待我们的合作！</div>
		</div>
	</div>
</body>
<script src="../js/plugins/axios.min.js"></script>
<script src="../js/plugins/vue.min.js"></script>
<script src="../mui/mui.min.js"></script>
<script src="../element-ui/element-ui.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="../js/conmon/compoents.js"></script>
<script src="../js/config.js"></script>

</html>
<script>
	var host = appconfig.platFormDevUrl;
	var app = new Vue({
		el: '#app',
		data() {
			return {
				name: "",
				phone: "",
				email: "",
				cooperationIntention: "",
				flag: "0",
				formData: {
					name: "",
					phone: "",
					email: "",
					cooperationIntention: ""
				},
				formRules: {
					name: [
						{
							required: true,
							message: "请填写姓名",
							trigger: "change"
						},
					],
					phone: [
						{
							required: true,
							message: "请填写手机号",
							trigger: "change"
						},
						{
							pattern: /^1\d{10}$/,
							message: "手机号格式不正确",
							trigger: "change"
						},
						{
							pattern: /^1\d{10}$/,
							message: "手机号格式不正确",
							trigger: "blur"
						}
					],
					email: [
						{
							required: true,
							message: "请填写邮箱",
							trigger: "change"
						},
						{
							pattern: /^1\d{10}$/,
							message: "手机号格式不正确",
							trigger: "change"
						},
						{
							pattern: /^1\d{10}$/,
							message: "手机号格式不正确",
							trigger: "blur"
						}
					],
					cooperationIntention: [
						{
							required: true,
							message: "请填写合作意向",
							trigger: "change"
						},
					]
				}
			};
		},
		methods: {
			edit1() {
				if (this.phone) {
					if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
						this.phone = "";
						mui.alert("手机号码格式有误，请重填");
						return false;
					}
				}
			},
			edit2() {
				if (this.email) {
					if (!(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.email))) {
						this.email = "";
						mui.alert("邮箱格式有误，请重填");
						return false;
					}
				}
			},
			save() {
				if (!this.name) {
					mui.alert("姓名不允许为空");
					return false;
				} else if (!this.phone) {
					mui.alert("手机号不允许为空");
					return false;
				} else if (!this.email) {
					mui.alert("邮箱不允许为空");
					return false;
				} else if (!this.cooperationIntention) {
					mui.alert("合作意向不允许为空");
					return false;
				} else {
					this.getMessage();
				}
			},
			getMessage: function () {
				var that = this;
				var param = {
					body: {
						name: this.name,
						phone: this.phone,
						email: this.email,
						cooperationIntention: this.cooperationIntention
					}
				}
				axios({
					method: "POST",
					url: host + "/api/platform/potentialClients/",
					data: param
				}).then(function (res) {
					console.log(res);
					that.flag = "1";
				}).catch(function (err) {
					console.log(err);
					mui.alert("提交失败");
				});
			}
		},
		mounted() { }
	})
</script>